<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唐诗体验 - 西安文化体验网站</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <header class="header">
        <div class="container">
            <h1 class="logo">西安文化之旅</h1>
            <nav class="nav">
                <ul class="nav-list">
                    <li><a href="index.html" class="nav-link">首页</a></li>
                    <li><a href="food.html" class="nav-link">西安美食</a></li>
                    <li><a href="travel.html" class="nav-link">旅游景点</a></li>
                    <li><a href="poetry.html" class="nav-link active">唐诗体验</a></li>
                    <li><a href="dialect.html" class="nav-link">陕西话</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="main">
        <section class="page-content">
            <div class="container">
                <h1 class="page-title">唐诗文化体验</h1>
                <p style="text-align: center; font-size: 1.1rem; color: #666; margin-bottom: 3rem;">
                    唐诗是中华文化的瑰宝，西安作为唐朝的都城长安，见证了无数诗人的才华横溢。
                    在这里，你可以欣赏经典唐诗，也可以与AI一起创作属于你的诗歌。
                </p>

                <div class="poetry-container">
                    <!-- 经典唐诗展示 -->
                    <h2 style="text-align: center; color: #764ba2; margin-bottom: 2rem;">📜 经典唐诗欣赏</h2>

                    <div class="poetry-card">
                        <h3 class="poetry-title">登鹳雀楼</h3>
                        <p class="poetry-author">王之涣</p>
                        <div class="poetry-content">
                            白日依山尽，<br>
                            黄河入海流。<br>
                            欲穷千里目，<br>
                            更上一层楼。
                        </div>
                    </div>

                    <div class="poetry-card">
                        <h3 class="poetry-title">春晓</h3>
                        <p class="poetry-author">孟浩然</p>
                        <div class="poetry-content">
                            春眠不觉晓，<br>
                            处处闻啼鸟。<br>
                            夜来风雨声，<br>
                            花落知多少。
                        </div>
                    </div>

                    <div class="poetry-card">
                        <h3 class="poetry-title">静夜思</h3>
                        <p class="poetry-author">李白</p>
                        <div class="poetry-content">
                            床前明月光，<br>
                            疑是地上霜。<br>
                            举头望明月，<br>
                            低头思故乡。
                        </div>
                    </div>

                    <div class="poetry-card">
                        <h3 class="poetry-title">回乡偶书</h3>
                        <p class="poetry-author">贺知章</p>
                        <div class="poetry-content">
                            少小离家老大回，<br>
                            乡音无改鬓毛衰。<br>
                            儿童相见不相识，<br>
                            笑问客从何处来。
                        </div>
                    </div>

                    <!-- AI诗歌创作对话 -->
                    <h2 style="text-align: center; color: #764ba2; margin: 3rem 0 2rem;">🤖 AI诗歌创作助手</h2>
                    <p style="text-align: center; color: #666; margin-bottom: 2rem;">
                        与AI一起创作诗歌，体验古典文学的魅力。你可以提供主题、意境或开头，AI将帮你完成诗歌创作。
                    </p>

                    <div class="chat-container">
                        <div class="chat-messages" id="chatMessages">
                            <div class="message ai-message">
                                <strong>AI诗人：</strong>你好！我是你的AI诗歌创作助手。你可以告诉我一个主题、场景或者诗歌的开头，我来帮你创作一首诗。比如你可以说"写一首关于西安的诗"或者"帮我续写：长安一片月..."。
                            </div>
                        </div>

                        <div class="chat-input">
                            <input type="text" id="userInput" placeholder="请输入你的诗歌创作需求..." maxlength="200">
                            <button onclick="sendMessage()" id="sendBtn">发送</button>
                        </div>

                        <div style="margin-top: 1rem; text-align: center;">
                            <button onclick="clearChat()"
                                style="background: #6c757d; color: white; border: none; padding: 0.5rem 1rem; border-radius: 20px; cursor: pointer;">清空对话</button>
                        </div>
                    </div>

                    <!-- 创作提示 -->
                    <div
                        style="background: white; border-radius: 15px; padding: 2rem; margin-top: 3rem; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);">
                        <h3 style="color: #764ba2; margin-bottom: 1.5rem; text-align: center;">💡 创作提示</h3>
                        <div
                            style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
                            <div
                                style="background: #f8f9fa; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #667eea;">
                                <h4 style="color: #333; margin-bottom: 0.5rem;">🌸 主题创作</h4>
                                <p style="color: #666; font-size: 0.9rem;">"写一首关于春天的诗"<br>"创作一首描写西安城墙的诗"</p>
                            </div>
                            <div
                                style="background: #f8f9fa; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #764ba2;">
                                <h4 style="color: #333; margin-bottom: 0.5rem;">✍️ 续写诗句</h4>
                                <p style="color: #666; font-size: 0.9rem;">"帮我续写：长安一片月"<br>"接下句：春风又绿江南岸"</p>
                            </div>
                            <div
                                style="background: #f8f9fa; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #667eea;">
                                <h4 style="color: #333; margin-bottom: 0.5rem;">🎭 风格模仿</h4>
                                <p style="color: #666; font-size: 0.9rem;">"用李白的风格写一首诗"<br>"模仿杜甫写一首关于民生的诗"</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 西安文化体验网站. 探索古都魅力，传承文化精神.</p>
        </div>
    </footer>

    <script>
        const API_KEY = 'sk-a8a3b15db82a4ec8a6ec25ee97b5dfce';
        const API_URL = 'https://api.deepseek.com/v1/chat/completions';

        async function sendMessage() {
            const userInput = document.getElementById('userInput');
            const sendBtn = document.getElementById('sendBtn');
            const chatMessages = document.getElementById('chatMessages');

            const message = userInput.value.trim();
            if (!message) return;

            // 添加用户消息
            addMessage(message, 'user');
            userInput.value = '';

            // 显示加载状态
            sendBtn.innerHTML = '<div class="loading"></div>';
            sendBtn.disabled = true;

            try {
                const response = await fetch(API_URL, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${API_KEY}`
                    },
                    body: JSON.stringify({
                        model: 'deepseek-chat',
                        messages: [
                            {

                                role: 'system',

                                content: '你是一位深谙唐诗格律与意境的AI诗人，现与用户进行唐诗接龙互动。规则：根据用户所出诗句，接续符合原诗格律的下一句（标注诗题与作者），附1-2句释义，可延伸诗歌背景或鉴赏知识。若遇非常见诗句需提示更正，接龙失败时主动认输。回复以诗句为核心，保持典雅简练。'

                            },
                            {
                                role: 'user',
                                content: message
                            }
                        ],
                        max_tokens: 500,
                        temperature: 0.8
                    })
                });

                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }

                const data = await response.json();
                const aiResponse = data.choices[0].message.content;

                // 添加AI回复
                addMessage(aiResponse, 'ai');

            } catch (error) {
                console.error('Error:', error);
                addMessage('抱歉，AI诗人暂时无法回应。请稍后再试，或检查网络连接。', 'ai');
            } finally {
                sendBtn.innerHTML = '发送';
                sendBtn.disabled = false;
            }
        }

        function addMessage(content, type) {
            const chatMessages = document.getElementById('chatMessages');
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${type}-message`;

            if (type === 'user') {
                messageDiv.innerHTML = `<strong>你：</strong>${content}`;
            } else {
                messageDiv.innerHTML = `<strong>AI诗人：</strong>${content.replace(/\n/g, '<br>')}`;
            }

            chatMessages.appendChild(messageDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        function clearChat() {
            const chatMessages = document.getElementById('chatMessages');
            chatMessages.innerHTML = `
                <div class="message ai-message">
                    <strong>AI诗人：</strong>你好！我是你的AI诗歌创作助手。你可以告诉我一个主题、场景或者诗歌的开头，我来帮你创作一首诗。比如你可以说"写一首关于西安的诗"或者"帮我续写：长安一片月..."。
                </div>
            `;
        }

        // 回车发送消息
        document.getElementById('userInput').addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
    <script src="script.js"></script>
</body>

</html>